<template>
  <side-bar-section>
    <a-menu mode="inline" theme="dark">
      <side-bar-link
        :title="$t('photos')"
        :route-id="'/(user)/photos'"
        :icon="isPhotosSelected ? 'picture' : 'picture-outline'"
        :is-selected="isPhotosSelected"
        @update:isSelected="isPhotosSelected = $event"
      ></side-bar-link>

      <side-bar-link
        v-if="$featureFlags.search"
        :title="$t('explore')"
        :route-id="'/(user)/explore'"
        icon="magnify"
      ></side-bar-link>

      <side-bar-link
        v-if="$featureFlags.map"
        :title="$t('map')"
        :route-id="'/(user)/map'"
        :icon="isMapSelected ? 'map' : 'map-outline'"
        :is-selected="isMapSelected"
        @update:isSelected="isMapSelected = $event"
      ></side-bar-link>

      <side-bar-link
        v-if="$preferences.people.enabled && $preferences.people.sidebarWeb"
        :title="$t('people')"
        :route-id="'/(user)/people'"
        :icon="isPeopleSelected ? 'account' : 'account-outline'"
        :is-selected="isPeopleSelected"
        @update:isSelected="isPeopleSelected = $event"
      ></side-bar-link>

      <side-bar-link
        v-if="$preferences.sharedLinks.enabled && $preferences.sharedLinks.sidebarWeb"
        :title="$t('shared_links')"
        :route-id="'/(user)/shared-links'"
        icon="link"
      ></side-bar-link>

      <side-bar-link
        :title="$t('sharing')"
        :route-id="'/(user)/sharing'"
        :icon="isSharingSelected ? 'account-multiple' : 'account-multiple-outline'"
        :is-selected="isSharingSelected"
        @update:isSelected="isSharingSelected = $event"
      ></side-bar-link>

      <div class="text-xs transition-all duration-200 dark:text-immich-dark-fg">
        <p class="hidden p-6 group-hover:sm:block md:block">{{ $t('library').toUpperCase() }}</p>
        <hr class="mx-4 mb-[31px] mt-8 block group-hover:sm:hidden md:hidden" />
      </div>

      <side-bar-link
        :title="$t('favorites')"
        :route-id="'/(user)/favorites'"
        :icon="isFavoritesSelected ? 'heart' : 'heart-outline'"
        :is-selected="isFavoritesSelected"
        @update:isSelected="isFavoritesSelected = $event"
      ></side-bar-link>

      <side-bar-link
        :title="$t('albums')"
        :route-id="'/(user)/albums'"
        icon="album"
        flipped-logo
        :dropdown-open="recentAlbumsDropdown"
      >
        <template #drop-down-content>
          <span class="hidden md:block">
            <recent-albums />
          </span>
        </template>
      </side-bar-link>

      <side-bar-link
        v-if="$preferences.tags.enabled && $preferences.tags.sidebarWeb"
        :title="$t('tags')"
        :route-id="'/(user)/tags'"
        icon="tags"
        flipped-logo
      ></side-bar-link>

      <side-bar-link
        v-if="$preferences.folders.enabled && $preferences.folders.sidebarWeb"
        :title="$t('folders')"
        :route-id="'/(user)/folders'"
        icon="folder"
        flipped-logo
      ></side-bar-link>

      <side-bar-link
        :title="$t('utilities')"
        :route-id="'/(user)/utilities'"
        :icon="isUtilitiesSelected ? 'tool-box' : 'tool-box-outline'"
        :is-selected="isUtilitiesSelected"
        @update:isSelected="isUtilitiesSelected = $event"
      ></side-bar-link>

      <side-bar-link
        :title="$t('archive')"
        :route-id="'/(user)/archive'"
        :icon="isArchiveSelected ? 'archive' : 'archive-outline'"
        :is-selected="isArchiveSelected"
        @update:isSelected="isArchiveSelected = $event"
      ></side-bar-link>

      <side-bar-link
        v-if="$featureFlags.trash"
        :title="$t('trash')"
        :route-id="'/(user)/trash'"
        :icon="isTrashSelected ? 'delete' : 'delete-outline'"
        :is-selected="isTrashSelected"
        @update:isSelected="isTrashSelected = $event"
      ></side-bar-link>
    </a-menu>

    <bottom-info />
  </side-bar-section>
</template>

<script>
import SideBarSection from './side-bar-section.vue';
import SideBarLink from './side-bar-link.vue';
import BottomInfo from './bottom-info.vue';
import RecentAlbums from './recent-albums.vue';
import { mapState } from 'vuex';

export default {
  name: 'SideBar',
  components: {
    SideBarSection,
    SideBarLink,
    BottomInfo,
    RecentAlbums,
  },
  data() {
    return {
      isArchiveSelected: false,
      isFavoritesSelected: false,
      isMapSelected: false,
      isPeopleSelected: false,
      isPhotosSelected: false,
      isSharingSelected: false,
      isTrashSelected: false,
      isUtilitiesSelected: false,
    };
  },
  computed: {
    ...mapState(['featureFlags', 'preferences', 'recentAlbumsDropdown']),
  },
};
</script>

<style scoped>
/* ... existing code ... */
</style>